<template>
<view class="myOrder-content">
	<view class="search">
		<input 
			value="233"
			type="text"
			placeholder="输入关键词搜索"
			:style="{backgroundImage: 'url(' +  `${prefix_image}/homepage/IntegralRecord/myOrder-search.png` + ')'}"
		/>
	</view>
	<view class="myOrder-tab">
		<view
			v-for="(item, index) in myOrderTab"
			:key="index"
			class="myOrder-tab-list" 
			:class="{active: myOrderTabNumber === index}"
			@tap="myOrderTabFun(index)"
		>
			{{item.name}}
		</view>
	</view>
	<view class="myOrder-list-outer">
		<view class="myOrder-list">
			<view class="myOrder-list-title">
				<view class="myOrder-list-title-left">
					<image :src="`${prefix_image}/homepage/IntegralRecord/PetBeauty.png`" mode="aspectFill" />
					<text>
						宠物美容造型服务
					</text>
				</view>
				<view class="myOrder-list-title-right">
					已完成
				</view>
			</view>
			
			<view class="myOrder-list-content">
				<view class="myOrder-list-content-left">
					<image :src="`${prefix_image}/homepage/IntegralRecord/activityCheckInBg.png`" />
				</view>
				<view class="myOrder-list-content-right">
					<view class="myOrder-list-content-right1">下单时间：2022-01-03 16:54</view>
					<view class="myOrder-list-content-right2">数量：1</view>
					<view class="myOrder-list-content-right3">实付：￥65.00</view>
				</view>
			</view>
			<view class="myOrder-list-bottom">
				<view class="myOrder-list-bottom-button1">
					退款
				</view>
				<view class="myOrder-list-bottom-button2" @tap="gotoPayDesk()">
					再来一单
				</view>
			</view>
		</view>
		<view class="myOrder-list">
			<view class="myOrder-list-title">
				<view class="myOrder-list-title-left">
					<image :src="`${prefix_image}/homepage/IntegralRecord/PetBeauty.png`" mode="aspectFill" />
					<text>
						宠物美容造型服务
					</text>
				</view>
				<view class="myOrder-list-title-right">
					已完成
				</view>
			</view>
			
			<view class="myOrder-list-content">
				<view class="myOrder-list-content-left">
					<image :src="`${prefix_image}/homepage/IntegralRecord/activityCheckInBg.png`" />
				</view>
				<view class="myOrder-list-content-right">
					<view class="myOrder-list-content-right1">下单时间：2022-01-03 16:54</view>
					<view class="myOrder-list-content-right2">数量：1</view>
					<view class="myOrder-list-content-right3">实付：￥65.00</view>
				</view>
			</view>
			<view class="myOrder-list-bottom">
				<view class="myOrder-list-bottom-button1">
					退款
				</view>
				<view class="myOrder-list-bottom-button2" @tap="gotoOrderDetail()">
					查看订单
				</view>
			</view>
		</view>
	</view>
	
</view>
	
</template>
<script>
import { defineComponent, reactive, toRefs } from "vue"
import config from '@/hooks/useConfig.js'
export default defineComponent({
	setup() {
		const { prefix_image }=config()
		
		const data = reactive({
			myOrderTab: [
				{
					name: "全部",
					
				},
				{
					name: "待付款",
				},
				{
					name: "待使用",
				},
				{
					name: "退款/售后",
				}
			],
			myOrderTabNumber: 0,
		})
		
		const myOrderTabFun = (index) => {
			data.myOrderTabNumber = index
		}
		
		const gotoPayDesk = () => {
			uni.navigateTo({
				url: '/pages/payDesk/index'
			});
		}
		
		const gotoOrderDetail = () => {
			uni.navigateTo({
				url: '/pages/orderDetails/index'
			});
		}
		return {
			...toRefs(data),
			myOrderTabFun,
			gotoPayDesk,
			gotoOrderDetail,
			prefix_image
		}
	}
})
</script>

<style lang="stylus" scoped>
.myOrder-content{
	background: #F6F6F7;
	overflow: hidden;
	min-height: 100vh;
	.search{
		padding: 0rpx 32rpx; 
		box-sizing: content-box;
		background-color: #fff;
	}
	.search input{
		background: #F4F4F4;
		border-radius: 38px;
		// width: 686rpx;
		height: 76rpx;
		background-repeat: no-repeat;
		background-size: 32rpx 32rpx;
		background-color: #F4F4F4;
		background-position: 24rpx center;
		padding-left: 72rpx;
		
		font-size: 28rpx;
		font-weight: 400;
		color: #999999;
	}
	
	.myOrder-tab{
		display: flex;
		height: 98rpx;
		line-height: 98rpx;
		background-color: #fff;
		// padding: 0rpx 32rpx;
		.myOrder-tab-list{
			flex: 1;
			font-size: 32rpx;
			// font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: rgba(17, 17, 17, 0.5);
			
			text-align: center;
			
		}
		.myOrder-tab-list:first-of-type{
			margin-left: -24rpx;
		}
		.myOrder-tab-list:last-of-type{
			margin-right: 6rpx;
		}
		.myOrder-tab-list.active{
			font-size: 32rpx;
			// font-family: PingFangSC-Semibold, PingFang SC;
			font-weight: 600;
			color: #111111;
			position: relative;
		}
		.myOrder-tab-list.active:after{			
			content: '';
			width: 32rpx;
			height: 6rpx;
			// display: block;
			margin: 0 auto;
			// border-bottom: 2px solid #333;
			background-color: #111111;
			position: absolute;
			bottom: 0rpx;
			left: 50%;
			margin-left: -16rpx;
			border-radius: 6rpx;
		}
	}
	
	.myOrder-list-outer{
		margin: 28rpx 32rpx;
		.myOrder-list{
			width: 686rpx;
			height: 349rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			padding: 0rpx 20rpx;
			box-sizing: border-box;
			padding-bottom: 24rpx;
			margin-bottom: 16rpx;
			.myOrder-list-title{
				display: flex;
				height: 88rpx;
				align-items: center;
				border-bottom: 1rpx solid rgba(0, 0, 0, 0.05);
				.myOrder-list-title-left{
					flex: 1;
					align-items: center;
					display: flex;
					image{
						width: 44rpx;
						height: 44rpx;
						
					}
					text{
						font-size: 32rpx;
						// font-family: PingFangSC-Semibold, PingFang SC;
						font-weight: 600;
						color: #333333;
						padding-left: 12rpx;
					}
				}
				.myOrder-list-title-right{
					font-size: 24rpx;
					// font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #FFAB00;
				}
			}
		
			.myOrder-list-content{
				display: flex;
				margin-top: 28rpx;
				.myOrder-list-content-left{
					image{
						width: 100rpx;
						height: 100rpx;
						background: #EAEAEA;
						border-radius: 16rpx;
					}
				}
				.myOrder-list-content-right{
					display: flex;
					flex-direction: column;
					margin-left: 16rpx;
					.myOrder-list-content-right1{
						font-size: 26rpx;
						// font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #666666;
						margin-bottom: 16rpx;
						line-height: 26rpx;
					}
					.myOrder-list-content-right2{
						font-size: 26rpx;
						// font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #666666;
						margin-bottom: 16rpx;
						line-height: 26rpx;
					}
					.myOrder-list-content-right3{
						font-size: 26rpx;
						// font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #666666;
						line-height: 26rpx;
					}
				}
			}
			.myOrder-list-bottom{
				display: flex;
				margin-top: 32rpx;
				justify-content: flex-end;
				
				.myOrder-list-bottom-button1{
					width: 148rpx;
					height: 64rpx;
					border-radius: 32rpx;
					border: 1px solid #CCCCCC;
					
					font-size: 24rpx;
					// font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #111111;
					text-align: center;
					line-height: 64rpx;
					box-sizing: border-box;
				}
				.myOrder-list-bottom-button2{
					width: 148rpx;
					height: 64rpx;
					background: #FFD300;
					border-radius: 32rpx;
					
					font-size: 24rpx;
					// font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #111111;
					text-align: center;
					line-height: 64rpx;
					margin-left: 16rpx;
					box-sizing: border-box;
				}
			}
		}
	}
	
}

</style>
